<template>
	<view class="mianv">
		<view class="topv">
			<image src="https://shangtu.obs.cn-north-4.myhuaweicloud.com/product/%E9%87%8E%E7%94%9F%E8%8F%8C.png"
				style="height: 300rpx;width: 100%;" mode="aspectFill"></image>
			<view class="overlay-content" v-on:click="back">
				<uni-icons type="left" size="30" color="#ffffff"></uni-icons><text style="color: white;">返回</text>
			</view>
		</view>

		<view class="container" style="width: 100%;">
			<view class="machantv">
				<view class="merchant-title">
					<image :src="merchantInfo.userAvatarUrl" style="width: 60rpx;height: 60rpx;border-radius: 50%;">
					</image>
					<text
						style="margin-left: 20rpx;color: #e67e22;font-size: 30rpx;">{{merchantInfo.merchantName}}</text>
				</view>
				<view
					style="width: 40%;display: flex;flex-direction: row;justify-content: flex-end;align-items:center;flex-wrap: wrap;">
					<image src="https://shangtu.obs.cn-north-4.myhuaweicloud.com/icon/%E4%BA%8C%E7%BB%B4%E7%A0%81.png" 
						style="width: 50rpx; height: 50rpx;margin-right: 20rpx;margin-top: 5rpx;" @click="drawQrcode"></image>	
					<text class="grace-icons icon-star grace-form-icon"
						style="font-size: 50rpx;color: #FFCC00;margin-right: 20rpx;" @click="focusMerchant"></text>
					<text class="grace-icons icon-comments grace-form-icon" style="font-size: 50rpx;color: #5dade2;"
						@click="toChat"></text>
					<text class="grace-icons icon-tel grace-form-icon"
						style="font-size: 60rpx;color: #58d68d;margin-inline: 20rpx;"></text>
					<text v-if="isMerchantOwner" class="grace-icons icon-add2 grace-form-icon"
						style="color:#75c1f5; font-size: 60rpx;" @click="addProduct"></text>
				</view>
			</view>
			<view class="product-container">
				<block v-for="(item, index2) in productList" :key="index2" :index="index2">
					<view class="product-item" @click="chooseProduct(item.id)">
						<!-- <text class="grace-gtbg-blue">标签</text> -->
						<image :src="item.imgs[0].url" mode="aspectFill"  class="grace-img-card-img"
							style="width: 340rpx; height: 340rpx;border-radius: 10rpx;"></image>
						<text class="grace-tags grace-gtbg-blue absolute-rt" style="height: 40rpx;width: 50rpx;line-height: 40rpx; font-size: 25rpx;">标签</text>
						<view
							style="display: flex;  flex-direction: row; justify-content: space-between; align-items: center;">
							<text
								style="width: 50%; font-size: 26rpx;font-weight: 600;color: #666666;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">&nbsp;{{item.productName}}</text>
							<text
								style="padding-right: 15rpx;color: #e67e22;font-weight: 600;font-size: 26rpx;">¥&nbsp;{{item.price}}</text>
						</view>
						<view class="button-container" v-if="index2 == 4">
							<text class="buttonv">上架</text>
						</view>
					</view>
				</block>
			</view>
		</view>

	</view>
</template>

<script>
	import focusApi from "@/api/focus.js"
	import imApi from "@/api/message.js"
	import merchantApi from "@/api/merchant.js"
	import productApi from "@/api/product.js"
	export default {
		data() {
			return {
				merchantInfo: {
					userAvatarUrl: ""
				},
				isFocus: false,
				isMerchantOwner: false,
				merchantId: null,
				merchantName: '牛肝菌专卖店',
				mainHeight: 500,
				currentCateIndex: 1,
				leftTo: 'cate1',
				productListTo: '',
				productList: []
			}
		},
		onLoad(options) {
			this.merchantId = options.merchantId
			merchantApi.getMerchantInfo(options.merchantId).then(res => {
				this.merchantInfo = res
				console.log(res)
			})
			focusApi.getOne(this.merchantId).then(res => {
				console.log("focus", res)
				if (res != null) {
					this.isFocus = true
					console.log("focus", this.isFocus)
				}
			})
			console.log("this.merchantId", this.merchantId)
		},
		onShow() {
			if (getApp().globalData.userInfo.merchantIds.includes(this.merchantId)) {
				this.isMerchantOwner = true;
				productApi.getProducts(this.merchantId, "ALL").then(res => {
					console.log(res)
					this.productList = res
				});
			} else {
				productApi.getProducts(this.merchantId, "OFFLINE").then(res => {
					this.productList = res
				});
			}
			this.$wsService.connect(getApp().globalData.userInfo.userId);
		},
		methods: {
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			chooseProduct(id) {
				uni.navigateTo({
					url: "/pages/productDetail/productDetail?productId=" + id
				})
			},
			addProduct() {
				uni.navigateTo({
					url: "/pages/merchant/addProduct/addProduct?merchantId=" + this.merchantId
				})
			},
			toChat() {
				uni.navigateTo({
					url: "/pages/chat/chat?" + 'userId=' + this.merchantInfo.userId + '&userName=' + this
						.merchantInfo.userName
				})
			},
			drawQrcode(){
				uni.navigateTo({
					url: "/pages/qrcode/qrcode?merchantId=" + this.merchantId + "&merchantName=" + this.merchantName
				})
			},
			focusMerchant() {
				uni.showLoading({
					title: '关注中',
					icon: 'loading'
				});
				focusApi.add(this.merchantId, 'MERCHANT').then(res => {
					this.isFocus = true
					uni.showToast({
						title: '已关注',
						icon: 'success',
						duration: 1500
					});
				}).catch(error => {
					uni.showToast({
						title: '关注失败',
						icon: 'fail',
						duration: 1500
					});
				})
			}
		}
	}
</script>

<style lang="scss">
	.mianv {
		position: relative;
	}

	.topv {
		position: relative;

		.overlay-content {
			position: absolute;
			top: 30%;
			left: 0;
			width: auto;
			height: auto;
			display: flex;
			justify-content: left;
			align-items: center;
			flex-wrap: wrap;
		}

		.overlay-text {
			color: #FFFFFF;
			font-size: 18px;
			text-align: center;
			margin-bottom: 10px;
			/* 文字和图标之间的间距 */
		}
	}

	.container {
		width: 100%;
		border-top-left-radius: 30rpx;
		border-top-right-radius: 30rpx;
		background-color: #fafafa;
		position: absolute;
		top: calc(100% - 30rpx);
		left: 0%;

		.machantv {
			border-top-left-radius: 30rpx;
			border-top-right-radius: 30rpx;
			background-color: white;
			display: flex;
			justify-content: left;
			align-items: center;
			flex-wrap: wrap;
			margin-bottom: 10rpx;

			.merchant-title {
				width: 50%;
				padding-inline: 20rpx;
				border-top-left-radius: 30rpx;
				border-top-right-radius: 30rpx;
				background-color: white;
				height: 120rpx;
				display: flex;
				justify-content: left;
				align-items: center;
				flex-wrap: wrap;
				margin-bottom: 10rpx;
			}
		}

		.product-container {
			width: 100vw;
			display: flex;
			flex-wrap: wrap;
			background-color: white;

			.product-item {
				width: 48vw;
				margin: 1%;
				box-sizing: border-box;
				background-color: white;
				padding: 5px;
				border-radius: 5px;
				box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
				position: relative;

				.absolute-rt {
					position: absolute;
					z-index: 2;
					left: 10rpx;
					top: 10rpx;
				}
			}

			.button-container {
				height: 60rpx;
				display: flex;
				align-items: center;

				.buttonv {
					margin-right: 20rpx;
					line-height: 40rpx;
					height: 40rpx;
					width: 50rpx;
					padding-inline: 20rpx;
					border: 1rpx solid #e2e2e2;
					box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
					background-color: #1FA2FF;
					color: white;
					border-radius: 25rpx;
					font-size: 22rpx;
				}
			}
		}
	}
</style>